<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Props {
  title?: string
  rightText?: string
  onBack?: () => void
}
const props = defineProps<Props>()
interface Emits {
  (e: 'click-right'): void
}
const emit = defineEmits<Emits>()
const router = useRouter()
const clickLeft = () => {
  if (props.onBack) {
    props.onBack()
  } else {
    router.back()
  }
}
</script>

<template>
  <div class="cp-nav-bar">
    <van-nav-bar
      left-arrow
      fixed
      placeholder
      :title="title"
      :right-text="rightText"
      @click-right="() => emit('click-right')"
      @click-left="clickLeft"
    />
  </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  &__arrow {
    font-size: 18px;
    color: var(--cp-text1);
  }
  &__text {
    font-size: 15px;
  }
}
</style>
